﻿
@{
    ViewBag.Title = "Index";
    Layout = "~/Areas/User/Views/Shared/UserLayout.cshtml";
}

<!-- APP MAIN ==========-->
<main id="app-main" class="app-main">
    <div class="wrap">
        <section class="app-content">
            <div class="widget">
                <header class="widget-header">
                    <h4 class="widget-title">推荐关系图</h4>
                </header><!-- .widget-header -->
                <hr class="widget-separator">
               
                <div class="widget-body">
                    <form id="form1"  class="form-horizontal">
                        <div class="content_wrap">
                            <div class="zTreeDemoBackground left">
                                <ul id="treeDemo" class="ztree"></ul>
                            </div>
                        </div>
                    </form>
                </div><!-- .widget-body -->
            </div><!-- .widget -->
        </section><!-- #dash-content -->
    </div><!-- .wrap -->
    <!-- APP FOOTER -->
    <div class="wrap p-t-0">
        <footer class="app-footer">
            <div class="clearfix">
                <div class="copyright text-center w100">@DirectSell.Common.Url.CommonConfig.companyName &copy;</div>
            </div>
        </footer>
    </div>
    <!-- /#app-footer -->
</main>
<!--========== END app main -->
<link href="~/DirectSellJs/ztree/demo.css" rel="stylesheet" />
<script src="~/DirectSellJs/ztree/jquery.ztree.core.js"></script>
<script src="~/DirectSellJs/ztree/jquery.ztree.excheck.js"></script>
<script src="~/DirectSellJs/ztree/jquery.ztree.exedit.js"></script>
<link href="~/DirectSellJs/ztree/metroStyle.css" rel="stylesheet" />
<SCRIPT type="text/javascript">
        var setting = {
            view: {
                addHoverDom: addHoverDom,
                removeHoverDom: removeHoverDom,
                selectedMulti: false
            },
            check: {
                enable: false
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            edit: {
                enable: false
            },
            callback: {
                onClick: nodeClick,
                onExpand: function (event, treeId, treeNode) {
                    addSubNode(treeNode);
                }
            }
        };
        var zNodes = null;
        $(document).ready(function () {
            //加载层
            var index = layer.load(1, {
                shade: [0.1, '#fff']
            });
            $.ajax({
                type: "get",
                url: "/RefereeMap/GetTreeList",
                dataType: "json",
                success: function (data) {
                    zNodes = data;
                    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                }
            });
            layer.close(index)//关闭加载层
        });

        var newCount = 1;
        function addHoverDom(treeId, treeNode) {
            var sObj = $("#" + treeNode.tId + "_span");
            if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
            var btn = $("#addBtn_" + treeNode.tId);
            if (btn) btn.bind("click", function () {
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                zTree.addNodes(treeNode, { id: (100 + newCount), pId: treeNode.id, name: "new node" + (newCount++) });
                return false;
            });
        };
        function nodeClick(event, treeId, treeNode, clickFlag) {
            addSubNode(treeNode);
        }

        function removeHoverDom(treeId, treeNode) {
            $("#addBtn_" + treeNode.tId).unbind().remove();
        };

        function addSubNode(treeNode) {
            if (!treeNode.isParent) return;
            var s = treeNode.children;
            if (s != undefined)
                return;
            //加载层
            var index = layer.load(1, {
                shade: [0.1, '#fff']
            });
            $.ajax({
                cache: true,
                type: "get",
                url: "/RefereeMap/GetNextList",
                data: { id: treeNode.id },
                async: true,
                success: function (data) {
                    var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                    zTree.addNodes(treeNode, data);
                },
                error: function (data) {
                    alert("error");
                }
            });
            layer.close(index)//关闭加载层
        }

</SCRIPT>